import { Layout, Affix } from 'antd'
import React, { Component } from 'react'
import { Row, Col } from 'antd'
import { Link,withRouter } from 'react-router-dom'
import { Menu } from 'antd'
//页面头部展示
 class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
      nav: [
        {
          to: '/indexpage',
          txt: '首页',
        },
        {
          to: '/getstart',
          txt: '新手入门'
        },
        {
          to: '/about',
          txt: '关于我们'
        }
      ]
    }
  }
  render() {
    const {pathname} = this.props.location
    return (
      <Affix offsetTop={0}>
        <Layout.Header
          style={{
            padding: 0
          }}
        >
          <div className='wrap'>
            <Row>
              <Col xs={6} sm={4} md={2}>
                <h1
                  style={{
                    textAlign: 'center',
                    color:'orange'
                  }}
                >
                CNode
                </h1>
              </Col>
              <Col xs={18} sm={20} md={22}>
                <Menu
                  mode={'horizontal'}
                  theme={'dark'}
                  style={{
                    lineHeight: '64px'
                  }}
                  selectedKeys={[pathname?pathname:'/indexpage']}
                >
                  {this.state.nav.map((item) => {
                    return (
                      <Menu.Item key={item.to}>
                        <Link to={item.to}>{item.txt}</Link>
                      </Menu.Item>
                    )
                  })}
                </Menu>
              </Col>
            </Row>
          </div>
        </Layout.Header>
      </Affix>
    )
  }
}
export default withRouter(Header)